<!-- 今日告警 -->
<template>
	<card
		:cardHeight="cardHeight"
		:cardTitle="'巡检任务（' + (type == 'head' ? '总' : '支') + '行）'"
		:noFilter="noFilter"
		:optionList="optionList"
		:noMore="noMore"
		@showDetails="showDetails()"
		@filter="filterSubbranch"
	>
		<Chart :optionData="option_column" style="height: 100%; padding-bottom: 10px"></Chart>
		<!-- <v-chart :option="option_column" style="height: 100%;padding-bottom: 10px;" autoresize id="compKey"></v-chart> -->
	</card>
</template>

<script>
var colorList = ['#50D166', '#FFDA44', '#F9836C', '#3698FF'];
import StatisticsMixins from '../StatisticsMixins';
import { mortgageapi } from '@/api/index.js';
export default {
	name: 'inspectionChartSmall',
	mixins: [StatisticsMixins],
	data() {
		return {
			optionList: [],
			deptId: '',
			startDate: '',
			endDate: '',
			option_column: {
				legend: {
					bottom: 0,
					left: 'center',
					itemWidth: 14,
					itemHeight: 14,
					textStyle: {
						fontSize: 14
					},
					itemGap: 10 // 图列项之间的间距
				},
				tooltip: {},
				// 颜色
				color: ['#4C93A2', '#FFDA44', '#2CD9C5'],
				series: [
					{
						type: 'pie',
						radius: [0, '60%'],
						label: {
							//echarts饼图内部显示百分比设置
							//  show: true,
							position: 'inside', //outside 外部显示  inside 内部显示
							formatter: `{d}%`, // 显示百分比
							color: '#ffffff', //颜色
							fontSize: 13 //字体大小
						},
						data: [
							{ value: 0, name: '已巡检' },
							{ value: 0, name: '已过期' },
							{ value: 0, name: '待巡检' }
						],
						itemStyle: {
							borderColor: '#fff',
							borderWidth: 2
						}
					}
				]
			}
		};
	},
	props: {
		compKey: {
			type: String,
			default: 'inspectionChart'
		},
		type: {
			type: [String, Number],
			default: 'head'
		},
		noFilter: {
			type: Boolean,
			default: true
		},
		pageScale: {
			type: [String, Number],
			default: 1
		}
	},
	computed: {
		noMore() {
			return !((this.type == 'head' && this.$_has('banking:inspection:headPage')) || (this.type != 'head' && this.$_has('banking:inspection:subPage')));
		}
	},
	watch: {
		noFilter: {
			handler(newValue, oldValue) {
				// if (!this.noFilter) {
				//   this.getSubbranchList();
				// }
			},
			immediate: true
		},
		pageScale: {
			handler(newValue, oldValue) {
				if (newValue != oldValue) {
					let option_column = { ...this.option_column };
					option_column.legend.itemGap = 50 * this.pageScale;
					option_column.legend.textStyle.fontSize = 14 * this.pageScale;
					option_column.series[0].label.fontSize = 24 * this.pageScale;
					this.option_column = { ...option_column };
				}
			},
			immediate: true
		}
	},
	methods: {
		showDetails() {
			// console.log('this.startDate', this.startDate);
			this.$router.push({
				path: '/Polling/subpolling'
			});
		},
		getInfo() {
			// if (!this.noFilter) {
			//   this.getSubbranchList();
			// }
			this.getInspection();
		},
		getInspection() {
			console.log(' this.type', this.type);
			let param = {
				orgId: this.globalOrgId
			};

			this.$postAction(this.type == 'head' ? mortgageapi.echartsUrl.headStatistics : mortgageapi.echartsUrl.subStatistics, param).then(da => {
				if (da.code == 1) {
					let dataForm = da.data;
					console.log(dataForm);
					let option_column = { ...this.option_column };
					let data = [
						{ value: dataForm.completeNum || 0, name: '已巡检' },
						{ value: dataForm.expireNum || 0, name: '已过期' },
						{ value: dataForm.waitNum || 0, name: '待巡检' }
					];
					option_column.series[0].data = data;

					option_column.legend.formatter = function (name) {
						let data = option_column.series[0].data;
						let total = 0;
						let tarValue = 0;
						for (let i = 0, l = data.length; i < l; i++) {
							total += data[i].value;
							if (data[i].name == name) {
								tarValue = data[i].value;
							}
						}
						return name + '' + ' ' + tarValue + '';
					};
					this.option_column = { ...option_column };
				}
			});
		},
		getSubbranchList() {
			this.$postAction(this.dashboardApi.headOfficeUrl.getSubbranchList, {
				orgId: this.globalOrgId
			}).then(da => {
				if (da.code == 1) {
					let list = da.data;
					if (list && list.length > 0) {
						this.optionList = list.map(item => {
							let info = {
								value: item.deptId,
								text: item.deptName
							};
							return info;
						});
					} else {
						this.optionList = [];
					}
				}
			});
		},
		filterSubbranch(e) {
			this.deptId = e;
			this.getInspection();
		}
	}
};
</script>

<style></style>
